<template>
  <div>
    <p class="item-warp">
      <input type="text"
             placeholder="输入账号"
             v-model="acc">
      <i class="iconfont icon-yonghu"></i>
    </p>
    <p class="item-warp">
      <input type="password"
             placeholder="输入密码"
             v-model="pwd">
      <i class="iconfont icon-lock"></i>
    </p>
    <p class="item-warp">
      <Button type="error"
              @click="login">登录</Button>
    </p>
    <SlideCode :show="codeShow"
               @isok="codeOk" />
  </div>
</template>

<script>
import SlideCode from 'components/common/slideCode/SlideCode'

import { userLogin } from 'server/front_k.js'

export default {
  data() {
    return {
      acc: '',
      pwd: '',
      codeShow: false
    }
  },
  methods: {
    login() {
      if (this.acc == '' || this.pwd == '') {
        return this.$Message.error('账号或密码不能为空')
      }
      if (!this.$rex.acc(this.acc) || !this.$rex.acc(this.pwd)) {
        return this.$Message.error('账号或密码输入错误')
      }
      this.codeShow = true
    },
    codeOk() {
      this.codeShow = false
      const data = {
        acc: this.acc,
        pwd: this.pwd
      }

      userLogin(data).then(res => {

        if (res.err_code == 1000) {
          window.localStorage.setItem('front_token', res.data)
          this.$show.$emit('userLoginSuccess')
          return this.$Message.success('登录成功')
        }
        this.$Message.error(res.message)
      })
    }
  },
  components: {
    SlideCode
  }
}
</script>

<style scoped>
.item-warp {
  margin: 10px 0;
  height: 40px;
  padding: 0 50px;
  position: relative;
}
.item-warp input {
  width: 100%;
  height: 100%;
  border: rgb(200, 200, 200) 1px solid;
  padding-left: 45px;
}
.item-warp button {
  width: 100%;
  background-color: rgb(228, 57, 60);
  border-radius: 1px;
  margin-top: 20px;
}
.item-warp i {
  position: absolute;
  left: 50px;
  top: 0;
  height: 40px;
  width: 40px;
  font-size: 20px;
  line-height: 40px;
  text-align: center;
  border: 1px solid rgb(189, 189, 189);
  background-color: rgb(244, 244, 244);
}
.item-warp input:focus {
  border-color: #a9a9a9;
  box-shadow: 1px 0 3px rgba(0, 0, 0, 0.1);
}
</style>